import { AlignmentEnum } from '@/enum/graph.enum.js'
import { isTrueForDict } from '@/utils/dict'
import { loadFont } from '@/utils/loadFont.js'
import { register } from '@antv/x6-vue-shape'
import BarCodeNode from './bar-code-node.vue'
import DateNode from './date-node.vue'
import ImgNode from './img-node.vue'
import LineNode from './line-node.vue'
import NumNode from './num-node.vue'
import QrCodeNode from './qr-code-node.vue'
import RectNode from './rect-node.vue'
import TextNode from './text-node.vue'
import TimeNode from './time-node.vue'

export const initRegisterNodes = () => {
  register({
    shape: 'CONTENT_TYPE_ABORDER',
    width: 100,
    height: 100,
    component: RectNode
  })
  register({
    shape: 'CONTENT_TYPE_TEXT',
    width: 100,
    height: 100,
    component: TextNode
  })
  register({
    shape: 'CONTENT_TYPE_IMAGE',
    width: 100,
    height: 100,
    component: ImgNode
  })
  register({
    shape: 'CONTENT_TYPE_DATE',
    width: 100,
    height: 100,
    component: DateNode
  })
  register({
    shape: 'CONTENT_TYPE_QRCODE',
    width: 100,
    height: 100,
    component: QrCodeNode
  })
  register({
    shape: 'CONTENT_TYPE_TIME',
    width: 100,
    height: 100,
    component: TimeNode
  })
  register({
    shape: 'CONTENT_TYPE_BARCODE',
    width: 100,
    height: 100,
    component: BarCodeNode
  })
  register({
    shape: 'CONTENT_TYPE_NUMBER',
    width: 100,
    height: 100,
    component: NumNode
  })
  register({
    shape: 'CONTENT_TYPE_LINE',
    width: 100,
    height: 100,
    component: LineNode
  })
}
const getRgbColor = (color) => {
  if (color === 'red') {
    return 'rgb(192,0,0)'
  } else if (color === 'yellow') {
    return 'rgb(255,192,0)'
  } else {
    return color
  }
}
export const getStyles = (nodeData) => {
  console.log(nodeData)
  const {
    visible,
    contentColor,
    borderSize = 1,
    borderColor = 'black',
    contentAlignment,
    fontBold,
    fontItalic,
    textDecoration,
    contentBackgroundColor,
    contentVerticalAlignment,
    lineSpacing,
    backgroundTransparent,
    contentReverse,
    border,
    fontSize,
    fontType,
    cornerWidth,
    cornerHeight,
    width,
    height
  } = nodeData
  const styles = {
    borderRadius: `${cornerWidth ? cornerWidth + 'px' : '0px'} ${cornerHeight ? cornerHeight + 'px' : '0px'}`,
    backgroundColor: isTrueForDict(backgroundTransparent)
      ? 'transparent'
      : getRgbColor(contentBackgroundColor),
    display: isTrueForDict(visible) ? 'flex' : 'none',
    color: getRgbColor(contentColor) || '#000000',
    justifyContent: AlignmentEnum[contentAlignment] || 'center',
    alignItems: AlignmentEnum[contentVerticalAlignment] || 'center',
    width: `${width}px`,
    height: `${height}px`,
    border: isTrueForDict(border)
      ? `${borderSize}px solid ${getRgbColor(borderColor)}`
      : 'none'
  }
  if (contentReverse) {
    styles.filter = `invert(${isTrueForDict(contentReverse) ? 1 : 0})`
  }
  if (lineSpacing) {
    styles.lineHeight = lineSpacing
  }
  // 字体大小
  if (fontSize) {
    styles.fontSize = `${fontSize}px`
  }
  // 字体
  if (fontType) {
    styles.fontFamily = fontType
    loadFont(fontType)
  }
  if (fontBold) {
    styles.fontWeight = 'bold'
  }
  if (fontItalic) {
    styles.fontStyle = 'italic'
  }
  if (textDecoration) {
    styles.textDecoration =
      textDecoration === 'strikethrough' ? 'line-through' : textDecoration
  }
  return styles
}
